<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const state = reactive({
	name: '',
	agree: 1,
	money: 556
})
const innerVisible = ref(false)

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,  
}>(), { 
	id: 0,
	status: 1
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}


const rules = reactive<FormRules<any>>({
	name: [
		{ required: true, message: '请输入拒绝退款理由', trigger: 'blur' },
	],
	agree: [
		{
			required: true,
			message: '请选择是否同意退款',
			trigger: 'change',
		},
	]
})

const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="申请退款" @close="closeDialog" style="width: 1000px;" center>
            <section>
				<el-form ref="ruleFormRef"
					:model="state"
					:rules="rules"
					label-width="120px"
					class="demo-ruleForm mb20"
					status-icon
				>
					<el-form-item label="退款申请金额：">
						<span>
							{{ state.money }} 元
						</span>
					</el-form-item>
					<el-form-item label="是否退款" prop="agree">
						<el-radio-group v-model="state.agree">
							<el-radio :label="1">同意</el-radio>
							<el-radio :label="2">拒绝</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="拒绝理由" prop="name" v-if="state.agree === 2">
						<el-input v-model="state.name" placeholder="请输入拒绝退款理由" />
					</el-form-item>
				</el-form>		
				<section style="text-align: center;">
					<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
				</section>
			</section>
		</el-dialog>
		
    </main>
</template>

<style lang='scss' scoped>

</style>